@layer components {
  .mono-upper {
    font-family: var(--font-mono);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
    letter-spacing: var(--tracking-wider);
    line-height: 1;
    text-transform: uppercase;
  }

  .borderclip {
    background-clip: padding-box, border-box;
  }

  .elbow {
    position: relative;
    overflow: visible;

    &:before {
      content: "";
      position: absolute;
      inset: calc(var(--elbow-offset) * -1);
      background: 
        /* Top-left corner: horizontal part */
        linear-gradient(var(--color-elbow), var(--color-elbow)) top 0 left 0 /
          var(--elbow-size) var(--elbow-width) no-repeat,
        /* Top-left corner: vertical part */
          linear-gradient(var(--color-elbow), var(--color-elbow)) top 0 left 0 /
          var(--elbow-width) var(--elbow-size) no-repeat,
        /* Top-right corner: horizontal part */
          linear-gradient(var(--color-elbow), var(--color-elbow)) top 0 right
          0 / var(--elbow-size) var(--elbow-width) no-repeat,
        /* Top-right corner: vertical part */
          linear-gradient(var(--color-elbow), var(--color-elbow)) top 0 right
          0 / var(--elbow-width) var(--elbow-size) no-repeat,
        /* Bottom-left corner: horizontal part */
          linear-gradient(var(--color-elbow), var(--color-elbow)) bottom 0 left
          0 / var(--elbow-size) var(--elbow-width) no-repeat,
        /* Bottom-left corner: vertical part */
          linear-gradient(var(--color-elbow), var(--color-elbow)) bottom 0 left
          0 / var(--elbow-width) var(--elbow-size) no-repeat,
        /* Bottom-right corner: horizontal part */
          linear-gradient(var(--color-elbow), var(--color-elbow)) bottom 0 right
          0 / var(--elbow-size) var(--elbow-width) no-repeat,
        /* Bottom-right corner: vertical part */
          linear-gradient(var(--color-elbow), var(--color-elbow)) bottom 0 right
          0 / var(--elbow-width) var(--elbow-size) no-repeat;
      pointer-events: none;
      opacity: var(--elbow-opacity);
    }
  }

  .loader-stripes {
    --loader-stripe-color: currentColor;
    background-image: repeating-linear-gradient(
      45deg,
      var(--loader-stripe-color),
      var(--loader-stripe-color) var(--loader-stripe-width),
      var(--color-background) var(--loader-stripe-width),
      var(--color-background) calc(var(--loader-stripe-width) * 2)
    );
    background-size: calc(var(--loader-stripe-width) * 2.828427125)
      calc(var(--loader-stripe-width) * 2.828427125);
    animation: scroll var(--loader-stripe-speed) linear infinite;
    overflow: hidden;
    background-clip: padding-box;
  }
}
